<template>
	<view class="video_set">
		<template v-if="list?.length > 0">
			<!-- <u-swiper :list="list" height="100vh" radius="0" bgColor="#000000" :current="current" :autoplay="false"
				@change="handleChange" :circular="true" keyName="url" imgMode="aspectFit" loading></u-swiper> -->
			<swiper class="swiper-img" :current="current" :duration="300" @change="handleChange" circular
				:vertical="params?.type === '1'?false:true">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<view class="img-page">
						<movable-area scale-area v-if="item?.type === '1'">
							<movable-view direction="all" scale="true" scale-min="1" scale-max="4">
								<image class="max-img" :src="item.url" :lazy-load="true" mode="aspectFit" />
							</movable-view>
						</movable-area>
						<video class="max-img" :src="item.url" :lazy-load="true" mode="aspectFit" v-else
							:id="'video'+index" @click="onVideoClick(item)" :controls="false"
							:show-center-play-btn="false" :enable-progress-gesture="false" />
					</view>
				</swiper-item>
			</swiper>
			<view class="video_set_num">{{current + 1}} / {{ list.length }}</view>
			<view class="video_set_right">
				<template v-if="list?.length > 0">
					<view class="video_set_right_item" @click="handleLikes">
						<image src="http://qianxueapplet.suoeryun.com/likeSelectionbig.png"
							v-if="list[current]['izLike'] == '1'">
						</image>
						<image src="http://qianxueapplet.suoeryun.com/likebig.png" v-else>
						</image>
						<text>{{list[current]['likes']??0}}</text>
					</view>
					<view class="video_set_right_item" @click="handleComments">
						<image src="http://qianxueapplet.suoeryun.com/commentbig.png">
						</image>
						<text>{{list![current]!['comment']??0}}</text>
					</view>
					<view class="video_set_right_item" @click="handleCloud">
						<image src="http://qianxueapplet.suoeryun.com/saveCloudalbumbigSelect.png"
							v-if="list![current]!['izCloud'] === '1'">
						</image>
						<image src="http://qianxueapplet.suoeryun.com/saveCloudalbumbig.png" v-else></image>
						<text v-if="list?.length > 0">{{list![current]!['clouds']??0}}</text>
						<text v-else>0</text>
					</view>
					<view class="video_set_right_item" @click="handleShare">
						<image src="http://qianxueapplet.suoeryun.com/rwardbig.png"></image>
						<text>{{list![current]!['relay']??0}}</text>
					</view>
				</template>
				<template v-else>
					<view class="video_set_right_item">
						<image src="https://qianxunyanxue-applet.obs.cn-north-4.myhuaweicloud.coms/likebig.png"></image>
						<text>0</text>
					</view>
					<view class="video_set_right_item">
						<image src="http://qianxueapplet.suoeryun.com/commentbig.png">
						</image>
						<text>0</text>
					</view>
					<view class="video_set_right_item">
						<image src="http://qianxueapplet.suoeryun.com/saveCloudalbumbig.png">
						</image>
						<text>0</text>
					</view>
					<view class="video_set_right_item">
						<image src="http://qianxueapplet.suoeryun.com/rwardbig.png"></image>
						<text>0</text>
					</view>
				</template>
			</view>
			<view class="item-bottom" v-if="params?.type === '1'">
				<scroll-view class="scroll-view_H " :scroll-x="true" :scroll-into-view="scrollTopIndex"
					:scroll-with-animation="true" scroll-left="20">
					<view class="img-page-box scroll-view-item_H" :class="current == index ? 'img-page-checked' : ''"
						v-for="(item, index) in list" :key="index" :id="`scrollToIndex${index}`"
						@click.stop="toImg(index)">
						<image class="img" :src="item.url" mode="aspectFill" />
					</view>
				</scroll-view>
			</view>
		</template>
		<u-empty v-else :text="params?.type === '1'?'暂无图集':'暂无视频集'" icon="http://qianxueapplet.suoeryun.com/tp.png" />
	</view>
	<!-- 评论 -->
	<comment ref="commentRef" @close="handleClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>
</template>

<script lang="ts" setup>
	import { ref, unref, onBeforeUnmount } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { qxActivityMediaList, qxCloudMediaAdd, addActivityMediaLikesAndBrowse } from "@/config/index.api";
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";
	import { getUrlParamJson } from '@/util/index';

	const params = ref();
	const current = ref(0);
	const list = ref([]);
	const commentRef = ref();
	const shareRef = ref();
	const scrollTopIndex = ref('');
	const videoCtx = ref();

	onLoad((item) => {
		console.log(item, 'item');
		params.value = item;
		if (item?.current) {
			current.value = Number(item?.current);
		}
		uni.setNavigationBarTitle({
			title: item.title
		})
	})

	onShow(() => {
		loadData();
	})

	onBeforeUnmount(() => {
		commentRef.value.handleClose()
	})

	async function loadData() {
		const res = await qxActivityMediaList({ activityId: unref(params)?.id, type: unref(params)?.type, pageSize: 9999 });
		console.log(res, 'res');
		list.value = res?.records ?? [];
		if (unref(params)?.type === '2' && list.value?.length > 0) {
			list.value?.map(item => {
				item.type = 'video'
				// delete item.type
			})
			videoCtx.value = uni.createVideoContext('video' + current.value);
			setTimeout(_ => {
				videoCtx.value.play();
			}, 200)
		}
		// 消息点进来显示评论数据
		if (unref(params)?.orderId) {//type 1 活动 2图集 3视频
			const index = list.value?.findIndex(item => item?.id === unref(params)?.imgvideoId);
			console.log(index);
			if (index >= 0) {
				current.value = index;
				commentRef.value.handleShow({ activityId: list.value[current.value]?.id, num: list.value[current.value]['comment'] ?? 0, belongId: unref(params)?.id, type: unref(params)?.type === '1' ? '2' : '3', orderId: unref(params)?.orderId });
			}
		}
		console.log(list.value, '21');
	}

	/**
	 * 分享
	 */
	// onShareAppMessage(async (res) => {
	// 	const item = unref(params);
	// 	const record = await addActivityMediaLikesAndBrowse({ activityId: list.value[unref(current)]?.id, operationType: '2' });
	// 	console.log(res, '123', record);
	// 	list.value[unref(current)]['relay'] = record?.relay;
	// 	return {
	// 		title: `${item?.activityName} - ${item?.title}`,
	// 		path: `/pages/index/videoSet?id=${item?.id}&current=${unref(current)}&title=${item?.title}&type=${item?.type}`
	// 	}
	// })

	/**
	 * 轮播图切换时触发
	 */
	function handleChange(e) {
		current.value = e?.detail?.current;
		scrollTopIndex.value = `scrollToIndex${e?.detail?.current}`;
		if (unref(params)?.type === '2') {
			videoCtx.value.pause();
			videoCtx.value = uni.createVideoContext('video' + unref(current));
			videoCtx.value.play();
		}
	}

	/**
	 * 添加云相册
	 */
	async function handleCloud() {
		let item = list.value[current.value];
		const res = await qxCloudMediaAdd({
			"activityMediaId": item!['id'],
			"type": unref(params)?.type,
			"url": item!['url'],
		});
		uni.showToast({
			icon: 'none',
			title: item?.izCloud == '1' ? '已取消保存云相册！' : '已保存至云相册'
		});
		list.value[current.value]['clouds'] = res.clouds;
		list.value[current.value]['izCloud'] = res.izCloud;
	}

	/**
	 * 点赞
	 */
	function handleLikes() {
		uni.$u.throttle(async () => {
			const res = await addActivityMediaLikesAndBrowse({ activityId: list.value[unref(current)]?.id, operationType: '1' });
			console.log('123', res);
			uni.showToast({
				icon: 'none',
				title: res?.izLike === '1' ? '点赞成功' : '取消点赞'
			});
			list.value[unref(current)]['izLike'] = res?.izLike;
			list.value[unref(current)]['likes'] = res?.likes;
		}, 1000)
	}

	/**
	 * 评论
	 */
	function handleComments() {//type 1 活动 2图集 3视频
		commentRef.value.handleShow({ activityId: list.value[current.value]?.id, num: list.value[current.value]['comment'] ?? 0, belongId: unref(params)?.id, type: unref(params)?.type === '1' ? '2' : '3' });
	}

	/**
	 * 分享
	 */
	async function handleShare() {
		const item = unref(params),
			reocrd = list.value[current.value];
		shareRef.value.handleShow({ path: 'pages/index/videoSet', scene: `id=${item?.id}&current=${unref(current)}&title=${item?.title}&type=${item?.type}`, activityId: reocrd?.id, title: item?.activityName });
	}

	/**
	 * 评论关闭回调
	 */
	function handleClose() {
		if (!unref(params)?.orderId) {
			loadData();
		}
	}

	/**
	 * 点击缩略图
	 */

	function toImg(index) {
		current.value = index;
	}

	/**
	 * 视频点击
	 */
	function onVideoClick(item) {
		if (item.isPlay) {
			// this.videoCtx.pause();
			// item.isPlay = false;
		} else {
			// this.videoCtx.play()
			// item.isPlay = true;
		}
	}
</script>

<style lang="scss" scoped>
	.video_set {
		position: relative;

		.swiper-img {
			height: 100vh;
			background-color: #000000;


			movable-view {
				display: flex;
				align-items: center;
				justify-content: center;

				width: 100vw;
				height: 100vh;
			}

			movable-area {
				position: fixed;
				overflow: hidden;
				width: 100vw;
				height: 100vh;

				transform: scale();
			}

			image,
			video {
				width: 100vw;
				height: 100vh;
			}
		}

		.video_set_num {
			position: absolute;
			top: 20rpx;
			left: 30rpx;
			color: #ffffff;
			text-shadow: 1px 1px 5px #333333;
			font-size: 35rpx;
		}

		.video_set_right {
			position: absolute;
			width: 60rpx;
			right: 34rpx;
			top: 40vh;
			display: flex;
			flex-direction: column;
			z-index: 99;

			.video_set_right_item {
				color: #ffffff;
				margin: 0 0 40rpx 0;
				background-color: transparent;
				padding: 0;
				line-height: 40rpx;
				// text-align: center;
				display: flex;
				flex-direction: column;

				align-items: center;

				&::after {
					border: 0;
					height: auto;
				}

				image {
					width: 72rpx;
					height: 72rpx;
				}

				text {
					font-size: 34rpx;
					font-weight: 500;
					text-shadow: 1px 1px 5px #333333;
				}
			}
		}

		.video_set_btm {
			position: absolute;
			bottom: 20rpx;
			color: #ffffff;
		}


		.item-bottom {
			position: fixed;
			z-index: 9999;
			bottom: 40rpx;
			left: 10vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			z-index: 9;

			width: 80vw;

			//  height: 200rpx;
			padding: 30rpx;

			transition: ease-in-out .3s;

			.scroll-view_H {
				width: 100%;
				box-sizing: border-box;
				padding-right: 32rpx;
				white-space: nowrap;
			}

			.scroll-view-item_H {
				display: inline-block;

				margin-right: 10rpx;

				transition: ease-in .1s;
				transform: scale(.8);

				border-radius: 11rpx;
				background: #c2c2c2;

				&:last-child {
					margin-right: 0;
				}

				.img {
					display: block;

					width: 100rpx;
					height: 170rpx;
				}
			}

			.img-page-checked {
				transform: translateY(-28rpx) scale(1);
			}
		}
	}
</style>